﻿@model smp.ButterflyCakes.Models.FormModels.Order.ComponentDecorationModel

<div class="container">
    <div class="container-fluid">
        @if (ViewBag.Error != null)
        {
            <div class="alert alert-block alert-error">
                <p>@ViewBag.Error</p>
            </div>
        }
        @Html.ValidationSummary(true)
    </div>
    
    <div class="container hideWhenEditing">
        <div id="RemoveDecorationError" class="alert alert-error hide">
            <button class="close" data-dismiss="alert" type="button">
                ×</button>
            <strong>Error</strong><p id="RemoveDecorationErrorMessage">
                                  </p>
        </div>
        <table id="decorations" class="table table-bordered table-hover">
            <tr>
                <th>Item</th>
                <th></th>
                <th></th>
            </tr>
            @if(Model.Decorations.Count == 0)
            {
                <tr class="nosizesrow">
                    <td colspan="3">
                        Please add decoration
                    </td>
                </tr>
            }
            else
            {
                <tr class="nosizesrow hide">
                    <td colspan="3">
                        Please add decoration
                    </td>
                </tr>
            }
            @foreach (var item in Model.Decorations)
            {
                <tr>
                    <td>
                        <strong>@item.Name - (x @item.Count)</strong><br/>
                        <p>@item.Description</p>
                        <div style="height: 25px; width: 100%; background: @item.Colour"></div>
                    </td>
                    <td>
                        <button class="btn btn-info editDecoration" type="button"  
                                ComponentDecorationId="@item.ComponentDecorationId" 
                                PresetDecorationId="@item.PresetDecorationId" 
                                Count="@item.Count" 
                                Description="@item.Description" 
                                Colour="@item.Colour" 
                                Name="@item.Name">
                            Edit</button>
                    </td>
                    <td>
                        <button class="btn btn-danger removeDecoration" type="button" SizeId="@item.ComponentDecorationId">
                            Remove</button>
                    </td>
                </tr>
            }
        </table>
    </div>

    <div class="form-actions hideWhenEditing">
        <button id="addADecoration" type="button" class="btn btn-info">
            Add Decoration
        </button>
    </div>

    <div id="SaveDecorationSuccess" class="alert alert-success hide">
        <button class="close" data-dismiss="alert" type="button">
            ×</button>
        <strong>Success</strong>Decoration was added to this cake
    </div>

    <div id="AddDecorationContainer" class="container hide">
        
        <input type="hidden" value="" name="ComponentDecorationId" id="ComponentDecorationId"/>
        
        <div id="SaveDecorationError" class="alert alert-error hide">
            <button class="close" data-dismiss="alert" type="button">
                ×</button>
            <strong>Error</strong><p id="SaveDecorationErrorMessage">
                                  </p>
        </div>
        
        <div class="row-fluid">
            
            <ul class="nav nav-tabs" id="decorationTab">
                <li class="active"><a class="tabclickable" href="#preset">Preset</a></li>
                <li><a class="tabclickable" href="#custom">Custom</a></li>
            </ul>
            
            <div class="tab-content">
                
                <div class="tab-pane active" id="preset">
                    
                    <div class="form-horizontal">
                        
                        <div class="control-group">
                            <label class="control-label" for="Size">
                                Preset Type</label>
                            <div class="controls">
                                @MvcHtmlString.Create(Model.SelectPresetType.Html)
                            </div>
                        </div>
                        
                        <div class="presetSearchContainer hide">
                        </div>
                        
                        <div id="PresetSelectedContainer" class="control-group hide">
                            <input type="hidden" value="" name="presetId" id="presetId"/>
                            <label class="control-label" for="presetName">
                                Name</label>
                            <div class="controls">
                                <strong id="presetName"></strong><br/>
                            </div>
                            <label class="control-label" for="presetDescription">
                                Description</label>
                            <div class="controls">
                                <p id="presetDescription"></p>
                            </div>
                        </div>

                        <div id="presetCountContainer" class="control-group hide">
                            <label class="control-label" for="PresetCount">
                                Count</label>
                            <div class="controls">
                                <input class="intspinner" type="text" id="PresetCount" name="PresetCount" placeholder="Enter number" value="">
                            </div>
                        </div>
                        
                        <div id="presetColourContainer" class="control-group hide">
                            <label class="control-label" for="PresetColour">
                                Colour</label>
                            <div class="controls">
                                <input type="hidden" value="" name="presetColour" id="presetColour"/>
                                <div>
                                    <div id="presetSelectedColour" style="height: 50px; width: 200px; background: white">
                                    </div>
                                    <a id="presetPickColour" type="button" class="btn btn-info">
                                        Toggle Colour Wheel</a>
                                </div>
                                <div id="presetColourPickerContainer" class="hide">
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="form-actions">
                        <button id="SavePreset" type="button" class="btn btn-success">
                            Save</button>
                        <button id="CancelAddPreset" type="button" class="btn btn-warning">
                            Cancel</button>
                        <div id="addSpinner" class="loadingimg hide" style="height: 25px">
                            <img src="@Url.Content("~/Content/images/ajax-loader.gif")" alt="Loading..."/>
                        </div>
                    </div>

                </div>

                <div class="tab-pane" id="custom">
                    
                    <div class="form-horizontal">
                        
                        <div class="control-group">
                            <label class="control-label" for="customDescription">
                                Description</label>
                            <div class="controls">
                                <textarea class="input-xxlarge" rows="10" cols="20" id="customDescription" name="customDescription" placeholder="Description"></textarea>
                            </div>
                        </div>
                        
                        <div id="customCountContainer" class="control-group">
                            <label class="control-label" for="CustomCount">
                                Count</label>
                            <div class="controls">
                                <input class="intspinner" type="text" id="CustomCount" name="CustomCount" placeholder="Enter number" value="">
                            </div>
                        </div>
                        
                        <div id="customColourContainer" class="control-group">
                            <label class="control-label" for="CustomColour">
                                Colour</label>
                            <div class="controls">
                                <input type="hidden" value="" name="CustomColour" id="CustomColour"/>
                                <div>
                                    <div id="customSelectedColour" style="height: 50px; width: 200px; background: white">
                                    </div>
                                    <a id="customPickColour" type="button" class="btn btn-info">
                                        Toggle Colour Wheel</a>
                                </div>
                                <div id="customColourPickerContainer" class="hide">
                                </div>
                            </div>
                        </div>

                    </div>
                    
                    <div class="form-actions">
                        <button id="SaveCustom" type="button" class="btn btn-success">
                            Save</button>
                        <button id="CancelAddCustom" type="button" class="btn btn-warning">
                            Cancel</button>
                        <div id="addSpinner" class="loadingimg hide" style="height: 25px">
                            <img src="@Url.Content("~/Content/images/ajax-loader.gif")" alt="Loading..."/>
                        </div>
                    </div>
                </div>

            </div>

        </div>

    </div>
    
    <form class="form-horizontal" id="editform" url="/order/CompleteCakeSize">
        @Html.HiddenFor(x => x.ComponentId)
        @Html.HiddenFor(x => x.OrderId)
        @Html.HiddenFor(x => x.IsCarved)
    </form>

    <div class="form-actions hideWhenEditing">
        <button id="save" type="submit" class="btn btn-success">
            Next
        </button>
        <button id="cancel" type="submit" class="btn btn-danger hide">
            Cancel
        </button>
    </div>

</div>
<script type="text/javascript">

    var isPresetWheelActive = false;

    function ResetDecoration() {
        $('#PresetSelectedContainer').slideUp(100);
        $('#presetColourContainer').slideUp(100);
        $('#presetSearchContainer').slideUp(100);
        $('#presetCanSetColour').val('');
        $('#presetId').val('');
        $('#presetName').text('');
        $('#presetDescription').text('');
        $('#PresetCount').val('0');
        $('#presetColour').val('#FFFFFF');
        $('#presetSelectedColour').css('background', '#FFFFFF');
        $('#PresetType').find("option").attr("selected", false);
        $('#customDescription').text('');
        $('#CustomCount').val('0');
        $('#CustomColour').val('#FFFFFF');
        $('#customSelectedColour').css('background', '#FFFFFF');
    }
    

    function LoadPresetColourPicker() {
        var cw = Raphael.colorwheel($('#presetColourPickerContainer'), 250);
        cw.onchange(function (colour) {
            $('#presetSelectedColour').css('background', colour.hex);
            $('#presetColour').val(colour.hex);
        });
    }


    function RegisterPresetSelectedEvent() {
        $('#PresetDecorations').change(function () {
            var selected = $('#PresetDecorations option:selected');
            var name = selected.text();
            var id = selected.val();
            var canSetColour = selected.attr('CanSetColour');
            var description = selected.attr('Description');
            $('#presetId').val(id);
            $('#presetName').text(name);
            $('#presetDescription').text(description);
            $('#PresetSelectedContainer').slideDown(500);
            $('#presetCountContainer').slideDown(500);
            if (canSetColour) {
                LoadPresetColourPicker();
                $('#presetColourContainer').slideDown(500);
            } else {
                $('#presetColourContainer').slideUp(100, function () {
                    $('#presetColourContainer').empty();
                });
            }
        });
    }


    $(document).ready(function () {

        $('#PresetType').combobox();

        $('#addADecoration').click(function (e) {
            e.preventDefault();
            ResetDecoration();
            $('.hideWhenEditing').slideUp(250, function () {
                $('#AddDecorationContainer').slideDown(500);
            });
        });

        $('#PresetType').change(function () {
            GetHtml('/order/GetPresetDecorations/' + $('#PresetType').val(), $('#presetSearchContainer'), function () {
                RegisterPresetSelectedEvent();
            });
        });
    });

</script>